<template>
  <div class="home">
    <!-- include:后面加入的值就是相应组件的name,加入后只缓存相应组件,其它组件不缓存 
         exclude:后面加入的值就是相应组件的name,除了这里面加name属性对应组件,其它组件都缓存
    -->
    <keep-alive include="find"><router-view></router-view></keep-alive>

    <!-- 嵌套路由
    1:在需要使用嵌套路由的地方加一个 router-view标签
    2:配制该路由的子集(children)    
     -->

    <!-- 标签栏
      van-tabbar   
        v-model:对应下面子项的索引值(从0开始)
        active-color="选中后的颜色"
        inactive-color="没有选中时的颜色"
        placeholder v2.6.0	固定在底部时，是否在标签位置生成一个等高的占位元素
        route:true:使用路由模式(使用路由模式后,不需要使用v-model了,它会自动识别当前路由地址与下面子项的to匹配)
      van-tabbar-item  icon="只能使用vant的图标"  to="对应路径path"
      slot="default/icon" 
    -->
    <!-- el-menu
     el-menu  active:默认选中哪一项,对应下面子项的index的值($route.path)
              router:true:使用路由模式,下面子项的index就是点击后路由的path
       el-menu-item  index="值"    
     -->
    <!-- 
     $router:整个路由的管理者,this.$router.push(path)
     $route:小秘书(想知道哪个当前公司基本信息),只能告诉我们当前路由的基本信息
      -->
    <van-tabbar
      v-if="$route.meta.needTab"
      active-color="#e40137"
      inactive-color="#b4b4bd"
      route
      class="tabbar"
      placeholder
    >
      <van-tabbar-item to="/home/company">
        <template #default>
          <div class="title">
            公司
          </div>
        </template>
        <template #icon>
          <i class="iconfont">&#xe63d;</i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/home/question">
        <template #default>
          <div class="title">
            刷题
          </div>
        </template>
        <template #icon>
          <i class="iconfont">&#xe63f;</i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/home/find">
        <template #default>
          <div class="title">
            发现
          </div>
        </template>
        <template #icon>
          <i class="iconfont">&#xe646;</i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item to="/home/my">
        <template #default>
          <div class="title">
            我的
          </div>
        </template>
        <template #icon>
          <i class="iconfont">&#xe64b;</i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 3
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  .tabbar {
    height: 60px;
  }
  .iconfont {
    font-size: 28px;
  }
}
</style>
